<template>
  <view class="footer">
    <view style="width: 19%;" @click="goFather(0)">
      <image class="nav-img" :src="show[0]"></image>
    </view>
    <view style="width: 19%;" @click="goFather(1)">
      <image class="nav-img" :src="show[1]"></image>
    </view>
    <view style="width: 19%;height: 50px;display: flex;justify-content: center;">
      <!-- <image class="mid-img" :src="show[2]"></image> -->
      <view class="mid-img">
        <view
          v-if="midText == 0"
          class="mid-btn"
          :style="{'color': color}"
          @click="goFather(2)">报修</view>
        <view
          v-else-if="midText == 1"
          class="mid-btn"
          :style="{'color': color}"
          @click="goFather(2)">档案</view>
        <view
          v-else-if="midText == 3"
          class="mid-btn"
          :style="{'color': color}"
          @click="goFather(2)">资料</view>
        <view
          v-else-if="midText == 4"
          class="mid-btn"
          :style="{'color': color}"
          >
          <image
            v-if="showImg"
            style="width: 48rpx;height: 48rpx;margin-top: 12rpx;border-radius: 30rpx;"
            :src="img"
            @click="goFather(4)"></image>
          <text v-else @click="goFather(2)">登录</text>
          </view>
      </view>
    </view>
    <view style="width: 19%;" @click="goFather(3)">
      <image class="nav-img" :src="show[3]"></image>
    </view>
    <view style="width: 19%;" @click="goFather(4)">
      <image class="nav-img" :src="show[4]"></image>
    </view>
  </view>
</template>

<script>
  export default {
    name:"foot",
    props:{
      page:Number
    },
    data() {
      return {
        show:[
          "../static/images/repair_1.png",
          "../static/images/cheliang.png",
          "../static/images/mid_image.png",
          "../static/images/parts.png",
          "../static/images/my.png"
        ],
        active:[
          "../static/images/repair_1.png",
          "../static/images/cheliang_1.png",
          "../static/images/mid_image_1.png",
          "../static/images/parts_1.png",
          "../static/images/my_1.png"
        ],
        color:'rgba(140, 140, 140, 1)',
        midText:0,
        img:'',
        showImg:false,
      };
    },
    mounted() {
      this.midText = this.page;
      if(uni.getStorageSync('token').length > 0) {
        this.img = uni.getStorageSync('user').headimg;
        this.showImg = true;
      }
      
      
    },
    methods:{
      goFather:function(index){
        if(index == 2) {
          this.color = 'rgba(242, 138, 48, 1)';
        }else {
          this.color = 'rgba(140, 140, 140, 1)';
          this.midText = index;
        }
        if(index == 4) {
          this.img = uni.getStorageSync('user').headimg;
          this.showImg = true;
        }
        var t = [
          "../static/images/repair.png",
          "../static/images/cheliang.png",
          "../static/images/mid_image.png",
          "../static/images/parts.png",
          "../static/images/my.png"
        ];
        if(index != 2){
          t[index] = this.active[index];
        }
        
        this.show = t;
        this.$emit('nav',index,this.midText);
        // console.log(uni.getStorageSync('user'))
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    height: 130rpx;
    line-height: 100rpx;
    background-color: white;
    display: flex;
    justify-content: center;
    box-shadow: 0 0 10px 0 rgba(56, 22, 0, 0.1);
  }
  .nav-img {
    width: 25px;
    height: 41px;
    position: relative;
    top: 10px;
  }
  
  .mid-img {
    width: 37px;
    height: 37px;
    position: relative;
    top: 10px;
    /* background-color: red; */
    /* border-radius: 37px; */
    background: url('https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/powerlogo_1.png') 0 0 no-repeat;
  }
  
  .mid-btn {
    line-height: 37px;
    font-size: 12px;
  }
</style>
